<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        .container {
            width: 400px;
            /* margin 外边距. 第一个数字上下外边距, 第二个数字表示水平外边距. 如果水平设置成 auto 表示元素就水平居中~~ */
            margin: 0 auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
        }

        .row {
            height: 40px;
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }

        .row span {
            width: 100px;
        }

        .row input {
            width: 200px;
            height: 30px;
        }

        .row button {
            width: 306px;
            height: 40px;
            color: white;
            background: orange;
            border: none;
        }

        .row button:active {
            background-color: #666;
        }
    </style>

    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交, 就会把信息显示在表格中</p>
        <div class="row">
            <span>谁: </span><input type="text">
        </div>
        <div class="row">
            <span>对谁: </span><input type="text">
        </div>
        <div class="row">
            <span>说: </span><input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>

        <!-- 需要构造出一个形如 -->
        <!-- <div class="row">
            黑猫 对 白猫 说: 喵
        </div> -->
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        let container = document.querySelector('.container');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 1. 获取到输入框的内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if (from == '' || to == '' || message == '') {
                alert('当前输入框内容为空!');
                return;
            }
            console.log(from + ", " + to + ", " + message);
            // 2. 能够构造出新的 div, 用来保存用户提交的内容
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + " 对 " + to + " 说: " + message;
            container.appendChild(rowDiv);
            // 3. 提交完之后, 清空输入框的内容
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].value = '';
            }

            let data = {
                from: from,
                to: to,
                message: message
            };
            // 4. 点击发送按钮, 给服务器发个 post 请求. 
            $.ajax({
                type: "post",
                url:"message",
                contentType: "application/json;charset=utf8",
                data : JSON.stringify(data),
                success : function(body) {
                    console.log("发送成功!")
                }
            })
        }
            //获取服务器返回的数据

            function getMessage () {
                $.ajax({
                    type : "get",
                    url:"message",
                    contentType : "application/json;charset=utf8",
                    //把获取的数据插入到页面上
                    success : function(body) {
                        let container = document.querySelector('.container');
                        for(let i = 0;i<body.length;i++) {
                            let message = body[i];
                            let row = document.createElement('div');
                            row.className = 'row';
                            row.innerHTML = message.from + "对 " +message.to +"说 "+ message.message;
                            container.appendChild(row);
                        }
                    }
                });
            }

        getMessage();

        
        
    </script>
</body>
</html>